/* eslint-disable  camelcase */
import { Select } from 'antd';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import '../index.less';
import { RefreshSvg } from '../svg';
import EchartDom from './echart';
import _ from 'lodash';
const prefixCls = 'load-template';
const Option = Select.Option;
export default function SystemLoad(props) {
  const { title, selectList, changeSelect, detail, selectVal } = props;
  const [echartOpction, setEchartOpction] = useState([
    // { key: 'net_bytes_recv' },
    // { key: 'net_bytes_sent' },
    { key: 'net_packets_recv' },
    { key: 'net_packets_sent' }
  ]);
  useEffect(() => {
    if (detail) {
      setEchartOpction([
        // {
        //   key: 'net_bytes_recv',
        //   data: data.net_bytes_recv_list,
        //   max: null,
        //   timer: data.created_at
        // },
        // {
        //   key: 'net_bytes_sent',
        //   data: data.net_bytes_sent_list,
        //   max: null,
        //   timer: data.created_at
        // },
        {
          key: 'net_packets_recv',
          data: detail.net_packets_recv_list.map(r => Number(r) * 8),
          max: null,
          timer: detail.created_at
        },

        {
          key: 'net_packets_sent',
          data: detail.net_packets_sent_list.map(r => Number(r) * 8),
          max: null,
          timer: detail.created_at
        }
      ]);
    }
  }, [detail]);
  const onSelect = value => {
    changeSelect(value);
  };
  const Dom = () => {
    return (
      <>
        {/* <div>
          <p className="echartTitle">网络发包数量: &nbsp;{renderNum('net_bytes_recv')}%</p>
          <div id="net_bytes_recv" className="echartBox" />
        </div
        <div>
          <p className="echartTitle">网络接收包数量: &nbsp;{renderNum('net_bytes_sent')}%</p>
          <div id="net_bytes_sent" className="echartBox" />
        </div> */}
        <div>
          <p className="echartTitle">
            网络发送流量: &nbsp;{_.get(detail, 'net_packets_sent', 0) * 8}Kbps
          </p>
          <div id="net_packets_sent" className="echartBox" />
        </div>
        <div>
          <p className="echartTitle">
            网络接收流量: &nbsp;{_.get(detail, 'net_packets_recv', 0) * 8}Kbps
          </p>
          <div id="net_packets_recv" className="echartBox" />
        </div>
      </>
    );
  };
  return (
    <div className={prefixCls}>
      <p className={`${prefixCls}-header df jcsb`}>
        <span> {title}</span>
        <div>
          <RefreshSvg />
          <span className="ml10">最近更新时间:</span>
          <span>{_.last(detail?.created_at)}</span>
        </div>
      </p>
      <Select style={{ width: 240 }} placeholder="选择设备" onSelect={onSelect} value={selectVal}>
        {selectList &&
          selectList.map(r => (
            <Option value={r.node_ip} key={r.node_ip}>
              {r.node_ip}
              {r.node_role !== 'single' && (
                <>
                  (
                  {!r.node_name
                    ? r.node_role === 'master'
                      ? '管理节点'
                      : '扫描节点'
                    : r.node_name}
                  )
                </>
              )}
              {r.node_role === 'single' && r.node_name && <>({r.node_name})</>}
            </Option>
          ))}
      </Select>
      <EchartDom Dom={Dom()} echartOpction={echartOpction} key={1} unit={'Kbps'} />
    </div>
  );
}
SystemLoad.propTypes = {
  title: PropTypes.string,
  selectList: PropTypes.array,
  changeSelect: PropTypes.func,
  detail: PropTypes.array,
  selectVal: PropTypes.string
};
